<template>
  <el-dialog
    width="400px"
    title="用户确认"
    :visible.sync="checkVisible"
    :append-to-body="true"
    class="selectUserSty"
    @close="onClose"
  >
    <compTree
      ref="tree"
      :tree-show-checkbox="true"
      :tree-data="treeData"
      :highlight-current="true"
      :show-search="false"
      :tree-default-checked-keys="treeDefaultCheckedKeys"
      :tree-default-expand-all="treeDefaultExpandAll"
      @treeNodeCheck="onCheck"
    />
    <div v-if="isShowDesc">
      <span style="line-height: 25px">备注</span>
      <el-input
        v-model="desc"
        type="textarea"
        :rows="2"
        size="mini"
      />
      <el-row style="line-height: 32px">
        <el-col :span="5">
          <span>联合复核：</span>
        </el-col>
        <el-col :span="19">
          <el-radio-group v-model="radio" style="line-height: 40px">
            <el-col :span="5">
              <el-radio :label="1">单个</el-radio>
            </el-col>
            <el-col :span="5">
              <el-radio :label="2">全部</el-radio>
            </el-col>
            <el-col :span="5">
              <el-radio :label="3">其中
                <el-input
                  v-model="inputVal"
                  type="text"
                />个</el-radio>
            </el-col>
          </el-radio-group></el-col></el-row>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="mini"
        @click="dialogClose"
      >取 消</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="dialogConfirm"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import { test2 } from '@/api/base'
import { getUserList } from '@/api/user'
// import CryptoJS from 'crypto-js'
import Global from '@/../public/js/global.js'
import { ParamArr, SQLTable } from '@/../public/js/paramarr'

export default {
  name: 'SelectUserLayer',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    params: {
      type: Object
    }
  },
  data() {
    return {
      treeData: [],
      checked: false,
      checkVisible: false,
      formData: {},
      //   表格数据
      formDatas: {
        pass: ''
      },
      radio: 1,
      desc: '',
      inputVal: 3,
      selectUser: [],
      treeDefaultCheckedKeys: [],
      treeDefaultExpandAll: false,
      isShowDesc: false
    }
  },
  methods: {
    open(ok) {
      this.checkVisible = true
      this.formData = this._.cloneDeep(this.params)
      this.isShowDesc = this.formData.resData.isShowDesc
      this.ok = ok
      var vPar = new ParamArr()
      getUserList(vPar).then((vPar) => {
        var nodes = []
        var nodeMap = new Map()
        // 分组
        var table = new SQLTable(vPar.getTable('QryGroup'))
        table.first()
        while (!table.eof()) {
          var node = {}
          node['id'] = table.getValueByName('ID')
          node.pid = table.getValueByName('PID')
          node['loginid'] = node.id
          node['name'] = table.getValueByName('Name')
          node['text'] = node.name
          node.folder = 1
          var pnode = Global.getTreeviewPNode(nodeMap, nodes, node.pid)
          pnode.push(node)
          nodeMap.set(node.id, node)
          table.next()
        }
        // 用户
        // eslint-disable-next-line no-redeclare
        var table = new SQLTable(vPar.getTable('QryUser'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node.id = table.getValueByName('ID')
          node.pid = table.getValueByName('PID')
          node['text'] = table.getValueByName('UserName')
          node['name'] = table.getValueByName('UserName')
          node['icon'] = 'user'
          node['loginid'] = node.id
          node['userid'] = table.getValueByName('UserID')
          node['mail'] = table.getValueByName('EMail')
          node['mobile'] = table.getValueByName('Mobile')
          node.state = {}
          // 父组件传过来的是名字，通过名字找ID
          // if (this.formData.resData.isShowDesc) {
          if (this.formData.resData.fsLimitUserName !== '') {
            this.selectUser = this.formData.resData.fsLimitUserName
            this.desc = this.formData.resData.fsLimitDesc
            this.radio = this.formData.resData.fiLimitInc
            for (const key in node) {
              this.formData.resData.fsLimitUserName.split(',').forEach(element => {
                if (node[key] === element) {
                  this.treeDefaultCheckedKeys.push(node.id)
                }
              })
            }
          }
          // }
          const pnode = Global.getTreeviewPNode(nodeMap, nodes, node.pid)
          pnode.push(node)
          nodeMap.set(node.id, node)
          table.next()
        }
        this.treeData = nodes
      })
    },
    onClose() {
      this.ok()
      this.checkVisible = false
    },
    dialogClose() {
      this.checkVisible = false
    },
    dialogConfirm() {
      if (this.selectUser.length === 0 || this.selectUser === '') {
        this.$message({
          type: 'warning',
          message: '请选择用户'
        })
        return
      }
      if (this.formData.resData.isShowDesc) {
        if (this.radio === 3) {
          if (this.inputVal > this.selectUser.length || this.inputVal === '0') {
            this.$message({
              type: 'warning',
              message: '联合复核个数不能少于0或大于人员数。'
            })
            return
          }
        }
        this.checkVisible = false
        this.ok([this.selectUser, this.desc, this.radio])
      } else {
        this.checkVisible = false
        this.ok(this.selectUser)
      }
    },
    onCheck(a, b) {
      this.selectUser = []
      b.checkedNodes.forEach(element => {
        if (element.icon === 'user') {
          this.selectUser.push(element)
        }
      })
    }
  }
}
</script>
<style scope lang="scss" >
.selectUserSty{
  .el-dialog__body{
    font-size: 12px;
    .el-tree{
        height: 300px !important;
    }
    .el-radio__label{
      padding-left: 4px;
    font-size: 12px;
    }
    .el-dialog__body{
    font-size: 12px;
    }
  }
}
</style>
